<template>
  <div class="qrcode">
    <div class="content">
      <div class="code">
        <img
          :src="code.invitation_img"
          alt=""
        >
      </div>
      <div class="copy">
        <button @click="doCopy" :data-clipboard-text="'http://m.mosecc.com/login?code='+code.invitation_code" class="tag-read" >复制邀请链接地址</button>
      </div>
      <div class="invite">
        <img
          src="../../assets/images/211.png"
          alt=""
        >
        <span>好友邀请码</span>
        <img
          src="../../assets/images/211.png"
          alt=""
        >
      </div>
      <div class="number">
        <span>{{code.invitation_code && code.invitation_code[0]}}</span>
        <span>{{code.invitation_code && code.invitation_code[1]}}</span>
        <span>{{code.invitation_code && code.invitation_code[2]}}</span>
        <span>{{code.invitation_code && code.invitation_code[3]}}</span>
        <span>{{code.invitation_code && code.invitation_code[4]}}</span>
        <span>{{code.invitation_code && code.invitation_code[5]}}</span>
      </div>
    </div>

  </div>
</template>
<script>
import { generateCode } from "../../api/user";
import Clipboard from "clipboard";
import { Toast } from "vant";
export default {
  data() {
    return {
      code: {}
    };
  },
  methods: {
    doCopy(val){
      let _this = this;
      var clipboard = new Clipboard(".tag-read");
      clipboard.on("success", e => {
        console.log("复制成功");
        Toast("复制成功");
        clipboard.destroy();
      });
      clipboard.on("error", e => {
        console.log("该浏览器不支持自动复制");
        Toast("复制失败");
        clipboard.destroy();
      });
    },
    getCode() {
      generateCode().then(res => {
        console.log(res);
        this.code.invitation_code = res.data.invitation_code.split("");
        this.code = res.data;
        console.log(this.code);
      });
    }
  },
  created() {
    this.getCode();
  }
};
</script>
<style lang="scss">
.qrcode {
  width: 100%;
  height: 100%;
  background-color: #f5f5f5;
  background: url("../../assets/images/beijin.png") no-repeat;
  background-size: 100% 100%;
  header {
    color: #fff;
  }
  .content {
    width: 90%;
    position: relative;
    left: 50%;
    top: 30%;
    transform: translateX(-50%);
    height: 380px;
    background: rgba(255, 255, 255, 1);
    border-radius: 20px;
    .code {
      top: 50%;
      left: 50%;
      width: 225px;
      height: 225px;
      position: absolute;
      transform: translate(-50%, -50%);
      background-size: 100% 100%;
      display: flex;
      display: -webkit-flex;
      justify-content: center;
      align-items: center;
      img {
        width: 70%;
        height: 70%;
      }
    }
    .copy {
      width: 100%;
      position: absolute;
      left: 0;
      bottom: 10%;
      text-align: center;
      button {
        width: 80%;
        height: 40px;
        background-color: #ffc62f;
        color: #fff;
        letter-spacing: 2px;
        font-size: 16px;
        font-weight: 500;
        border: none;
        outline: none;
        border-radius: 5px;
      }
    }
    .number {
      width: 100%;
      position: absolute;
      left: 0;
      top: 15px;
      display: flex;
      display: -webkit-flex;
      justify-content: space-around;
      padding: 15px;
      span {
        border-bottom: 1px solid rgba(241, 23, 49, 1);
        font-size: 25x;
        padding: 5px;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(241, 23, 49, 1);
      }
    }
    .invite {
      position: absolute;
      left: 50%;
      top: 80px;
      width: 100%;
      display: flex;
      justify-content: center;

      height: 30px;
      transform: translateX(-50%);
      img {
        height: 18px;
        width: 15px;
      }
      span {
        font-size: 20px;
        font-family: PingFang-SC-Bold;
        font-weight: bold;
        color: rgba(241, 23, 49, 1);
        line-height: 20px;
        padding: 0 20px;
      }
    }
  }
}
</style>


